import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'index_page.dart';

class LoginPage extends StatelessWidget {
  final TextEditingController _usernameController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    ///Set the fit size (fill in the screen size of the device in the design) If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
//    return Scaffold(
//      body: Container(
//        decoration: BoxDecoration(
//          image: DecorationImage(
//            image: AssetImage('images/login_bg.webp'),
//            fit: BoxFit.cover,
//          ),
//        ),
//        child: SafeArea(
//            child: ListView(
//              padding: const EdgeInsets.all(24.0),
//              children: <Widget>[
//                Container(
//                  alignment: Alignment.center,
//                  child: _loginTray(context),
//                ),
//              ],
//            ),
//          ),
//      ),
//    );
    return Material(
      color: Color.fromARGB(255, 231, 231, 231),
      child: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('images/login_bg.webp'),
            fit: BoxFit.cover,
          ),
        ),
        child: Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            elevation: 0.0,
            brightness: Brightness.light,
            backgroundColor: Colors.transparent,
          ),
          body: SafeArea(
            child: ListView(
              padding: const EdgeInsets.all(24.0),
              children: <Widget>[
                Container(
                  alignment: Alignment.center,
                  child: _loginTray(context),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }

  //登录托盘
  Widget _loginTray(context) {
    return Container(
      width: ScreenUtil.getInstance().setWidth(600),
      height: ScreenUtil.getInstance().setHeight(500),
      padding: const EdgeInsets.all(10.0),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.all(
          Radius.circular(7.0),
        ),
        boxShadow: [
          //卡片阴影
          BoxShadow(
            color: Colors.black54,
            offset: Offset(10.0, 10.0),
            blurRadius: 4.0,
          ),
        ],
      ),
      child: Column(
        children: <Widget>[_loginTitle(), _loginBox(), _loginButton(context)],
      ),
    );
  }

  //登录标题
  Widget _loginTitle() {
    return Container(
      alignment: Alignment.centerLeft,
      height: ScreenUtil.getInstance().setHeight(100),
      child: Text(
        '登录',
        style: TextStyle(
            color: Colors.black87,
            fontSize: ScreenUtil.getInstance().setSp(46)),
      ),
    );
  }

  //登录框
  Widget _loginBox() {
    return Container(
      height: ScreenUtil.getInstance().setHeight(250),
      alignment: Alignment.center,
      child: Column(
        children: <Widget>[
          TextField(
              autofocus: true,
              controller: _usernameController,
              decoration: InputDecoration(
                  labelText: "用户名",
                  hintText: "用户名或邮箱",
                  prefixIcon: Icon(Icons.person)),
              onChanged: (v) {
                //监听输入变化
                print("onChange: $v");
              }),
          TextField(
            controller: _passwordController,
            decoration: InputDecoration(
                labelText: "密码",
                hintText: "您的登录密码",
                prefixIcon: Icon(Icons.lock)),
            obscureText: true,
          ),
        ],
      ),
    );
  }

  //登录按钮
  Widget _loginButton(context) {
    return Container(
      alignment: Alignment.centerRight,
      child: RaisedButton(
        shape:
            RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
        onPressed: () {
          if (_passwordController.text.length == 0 ||
              _usernameController.text.length == 0) {
            showDialog(
                context: context,
                builder: (context) => AlertDialog(
                      title: Text('账号和密码不能为空'),
                    ));
          } else {
            showDialog(
                context: context,
                builder: (context) => AlertDialog(
                      title: Text('登录成功'),
                    ));
            _usernameController.clear();
            _passwordController.clear();
            Navigator.of(context).pushAndRemoveUntil(
                new MaterialPageRoute(builder: (context) => new IndexPage()),
                (route) => route == null);
          }
        },
        color: Colors.blue,
        child: Text(
          '登录',
          style: TextStyle(
              color: Colors.white,
              fontSize: ScreenUtil.getInstance().setSp(36)),
        ),
      ),
    );
  }
}
